<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-03-24 17:51:09
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-06 18:53:44
 * @FilePath: /BLOG/src/views/start/index.vue
-->
<template>
  <div class="start-content-container">
    <img :src="state.bgImgUrl" style="width: 100%; height: 100%; object-fit: cover" />
    <div class="container-warp">
      <div class="header"></div>
      <div class="main">
        <div class="content-container-center">
          <div class="scale-warp" :style="{ transform: `scale(${state.clockSize})` }">
            <div class="time-select">
              <div class="clock-warp pointer kbn-custom" data-tip="点我 切换全屏！" data @click="handleFullScreen">
                <Vue3FlipClock></Vue3FlipClock>
              </div>
              <div class="date" style="margin-top: 20px; font-size: 24px">
                <span>{{ state.currentDate }}</span>
                <span style="margin: 0 10px" class="pointer kbn-custom" data-tip="随机切换背景哟（略略略）！" @click="handleToggleBg">
                  {{ weekConfig[state.week] || '星期' + state.week }}
                </span>
                <span>{{ state.lunar }}</span>
              </div>
            </div>

            <div class="to-warp" v-show="!state.isFullSreen">
              <ToolTip content="BLOG 首页" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <text class="to kbn-link" data-tip="首页" @click="handleBlog" :style="{ fontSize: isMobi ? '32px' : '24px' }">🏡</text>
                </div>
              </ToolTip>
              <ToolTip content="后台管理" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <img
                    class="to kbn-link"
                    data-tip="后台管理"
                    @click="handleToBack('/index')"
                    :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '32px' : '24px' }"
                    src="@/assets/images/icon/backstage.svg" />
                </div>
              </ToolTip>
              <ToolTip content="人情薄 H5页面" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <img
                    class="to kbn-link"
                    data-tip="人情薄 H5页面"
                    @click="handleToBack('/m/favors')"
                    :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '32px' : '24px' }"
                    src="@/assets/images/icon/华为mate40pro.png" />
                </div>
              </ToolTip>
              <template v-if="useAppStore().projectConfig.appDownload == 'true'">
                <el-popover placement="bottom" title="APP下载" width="300" trigger="hover">
                  <div class="qr">
                    <div class="tip" style="font-size: 12px; margin-bottom: 20px; width: 100%; color: #999">请扫描下载APP或者点击下方按钮直接下载</div>
                    <img :src="getOnlineImgUrl('/imgs/common/app-qr.png')" alt="app-qr" />
                    <button style="margin-top: 40px" class="download-btn kbn-custom" data-tip="点击下载 app" @click="handleDownloadApp">点击下载APP</button>
                  </div>
                  <template #reference>
                    <div class="to-item-warp pointer">
                      <img
                        class="to kbn-link"
                        date-tip="APP下载"
                        :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '29px' : '21px' }"
                        src="@/assets/images/icon/apk.svg" />
                    </div>
                  </template>
                </el-popover>
              </template>
              <ToolTip content="随机切换背景哟（略略略）！" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <img
                    class="pointer kbn-custom"
                    data-tip="随机切换背景哟（略略略）！"
                    @click="handleToggleBg"
                    :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '32px' : '24px' }"
                    src="@/assets/images/icon/icon_toggle_bg.svg" />
                </div>
              </ToolTip>
              <ToolTip content="切换是否开启 背景自动切换！" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <img
                    class="pointer kbn-custom"
                    data-tip="切换是否开启 背景自动切换！"
                    @click="handlePlayToggleBG"
                    :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '32px' : '24px' }"
                    src="@/assets/images/icon/icon_auto_bg.svg" />
                </div>
              </ToolTip>
              <ToolTip content="切换背景切换的 时长" placement="top">
                <div class="to-item-warp pointer" :style="{ width: isMobi ? '42px' : '34px', height: isMobi ? '42px' : '34px' }">
                  <img
                    class="pointer kbn-custom"
                    data-tip="切换背景切换的 时长！"
                    @click="handleToggleBgTime"
                    :style="{ width: isMobi ? '32px' : '24px', height: isMobi ? '32px' : '24px' }"
                    src="@/assets/images/icon/icon_bg_timer.svg" />
                </div>
              </ToolTip>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <span class="sub-title pointer kbn-custom" data-tip="点我 刷新名言名句！" @click="handleRefreshSaying">「 {{ state.saying }} 」</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';
import { useAppStore } from '@/store/app';
import { changeBgImg, CustomMessage, getBackstageurl, getLunar, getOnlineImgUrl } from '@/utils/common';
import axios from 'axios';
import { ElPopover } from 'element-plus';
import moment from 'moment';
import { onMounted, onUnmounted, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';

const { isMobi } = useResize();
const appStore = useAppStore();
const router = useRouter();
const weekConfig = {
  0: '星期日',
  1: '星期一',
  2: '星期二',
  3: '星期三',
  4: '星期四',
  5: '星期五',
  6: '星期六',
  7: '星期日'
};

let state = reactive({
  timer: 0,
  currentTime: moment().format('HH:mm:ss'),
  currentDate: moment().format('MM月DD日'),
  week: moment().day(),
  lunar: getLunar(moment().format('YYYY-MM-DD')),
  isFullSreen: appStore.isFullSreen,
  clockSize: isMobi.value ? 0.5 : 0.8,
  saying: '渔得鱼心满意足，樵得樵眼笑眉舒！',
  bgImgUrl: changeBgImg(),
  screenSize: window.screen.width / 1000 + 0.5,
  isAutoToggleBg: appStore.isAutoToggleBg,
  toggleBgTime: appStore.toggleBgTime
});

// 是否全屏
if (state.isFullSreen) {
  state.clockSize = isMobi.value ? 0.7 : state.screenSize;
} else {
  state.clockSize = isMobi.value ? 0.5 : 1;
}

// 获取名言名句
const getSaying = () => {
  axios.get('https://api.xygeng.cn/one', {}).then(response => {
    let res = response.data;
    if (res.code == 200) {
      if (isMobi.value) {
        state.saying = res.data.content.length > 20 ? res.data.content.slice(0, 20) + '...' : res.data.content;
      } else {
        state.saying = res.data.content.length > 40 ? res.data.content.slice(0, 40) + '...' : res.data.content;
      }
    }
  });
};
// 刷新名言名句
getSaying();
const handleRefreshSaying = () => {
  getSaying();
};

// 切换背景
const handleToggleBg = () => {
  state.bgImgUrl = changeBgImg();
};

// 定时切换壁纸
const handleTimer = () => {
  if (state.timer) clearInterval(state.timer);
  state.toggleBgTime = appStore.toggleBgTime;
  state.timer = setInterval(() => {
    if (appStore.isAutoToggleBg) handleToggleBg();
  }, state.toggleBgTime * 60 * 1000); // toggleBgTime 单位：分钟
};

// 切换是否自动切换背景
const handlePlayToggleBG = type => {
  appStore.SET_AUTO_TOGGLE_BG(type == 'toggle_timr' ? true : !appStore.isAutoToggleBg);
  if (appStore.isAutoToggleBg) {
    handleTimer();
  }
  if (type != 'toggle_timr') CustomMessage({ msg: '自动切换背景已' + (appStore.isAutoToggleBg ? '开启' : '关闭') });
};

// 切换背景切换的 时长
const times = [1, 5, 20, 60];
const handleToggleBgTime = () => {
  appStore.SET_AUTO_TOGGLE_BG(true);
  let index = times.indexOf(appStore.toggleBgTime);
  index = index === times.length - 1 ? 0 : index + 1;
  appStore.SET_TOGGLE_BG_TIME(times[index]);
  handlePlayToggleBG('toggle_timr');
  CustomMessage({ msg: '背景切换时长已设置为 ' + appStore.toggleBgTime + ' 分钟' });
};

// 跳转到博客
const handleBlog = () => {
  router.push('/');
};

// 跳转到后台管理
const handleToBack = url => {
  window.open(getBackstageurl() + url, '_blank');
};

// 全屏/退出全屏 兼容性处理
const handleFullScreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    var requestMethod =
      document.documentElement.requestFullScreen || //W3C
      document.documentElement.webkitRequestFullScreen || //Chrome等
      document.documentElement.mozRequestFullScreen || //FireFox
      document.documentElement.msRequestFullscreen; //IE11

    if (requestMethod) {
      requestMethod.call(document.documentElement);
      state.clockSize = isMobi.value ? 0.7 : state.screenSize;
      state.isFullSreen = true;
      appStore.SET_FULL_SCREEN(true);
    } else if (typeof window.ActiveXObject !== 'undefined') {
      var wscript = new ActiveXObject('WScript.Shell');
      if (wscript !== null) {
        wscript.SendKeys('{F11}');
        state.isFullSreen = true;
        state.clockSize = isMobi.value ? 0.7 : state.screenSize;
        appStore.SET_FULL_SCREEN(true);
      }
    }
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
      state.clockSize = isMobi.value ? 0.5 : 1;
      state.isFullSreen = false;
      appStore.SET_FULL_SCREEN(false);
    }
  }
};

// 下载app
const handleDownloadApp = () => {
  window.location.href = appStore.projectConfig.bsServerUrl + '/app/blog.apk';
};

watch(
  () => appStore.isFullSreen,
  n => {
    state.isFullSreen = n;
    if (n) {
      state.clockSize = isMobi.value ? 0.7 : state.screenSize;
    } else {
      state.clockSize = isMobi.value ? 0.5 : 1;
    }
  }
);
onMounted(() => {
  handleTimer();
});

onUnmounted(() => {
  if (state.timer) clearInterval(state.timer);
});
</script>

<style lang="scss" scoped>
.start-content-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: cover;
  .container-warp {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .main {
      width: 100%;
      flex: 1;
      display: flex;
      position: relative;
      .content-container-center {
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -60%);
      }
      .time-select {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        .clock-warp {
          cursor: pointer;
        }
        .date {
          margin-top: 10px;
          font-size: 16px;
          font-weight: 500;
          // font-family: DSDIGI;
          text-shadow: 1px 1px 1px #000;
        }
      }
      .to-warp {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 24px;
        align-items: center;
        .to-item-warp {
          padding: 5px;
          border-radius: 5px;
          margin: 0 10px;
          background-color: #ffffff77;
          border: 1px solid #fff;
          box-shadow: 1px 1px 2px #000000;
        }
      }
      .select-warp {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 30px;
        padding: 0 20px;
        .el-input {
          max-width: 350px;
        }
      }
    }
    .footer {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .sub-title {
        padding: 3px 5px;
        font-size: 12px;
        background-color: var(--bg-content-color);
        color: var(--text-color);
        text-align: center;
        border-radius: 4px;
      }
    }
  }
}
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  .download-btn {
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid var(--theme-light-color-4);
    color: var(--theme-color);
    background-color: #fff;
  }
}
.pc,
.mobile {
  margin-left: 20px;
  border-left: 1px solid #ccc;
  padding-left: 10px;
  cursor: pointer;
}
.mobile {
  margin-left: 10px;
}

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

<style lang="scss">
.select-warp {
  .el-input-group__prepend {
    width: 60px;
    position: relative;
    padding: 0 30px !important;
    .select-type-warp {
      position: absolute;
      left: 5px;
    }
  }
}
</style>
